<template>
    <div v-show="visible" :class="['floatwindows', customClass]" ref="floatwindow" :style="winStyle">
        <div class="floatwindowsheader" :style="{ height: (type == '1' && rowcolchange) ? '5px' : '28px' }">
            <i class="el-icon-refresh" style="padding-left: 5px;cursor: pointer;" v-if="type == '1' && !rowcolchange"
                @click="showrowcolchange"></i>
            <slot name="title">
                <span class="el-dialog__title">{{ title }}</span>
            </slot>
            <el-button v-if="showExportBtn" @click="exportReportPDF" style="margin-left:20px;">导出</el-button>
            <button type="button" class="el-dialog__headerbtn" style="top:4px;right:5px;" aria-label="Close"
                v-if="showClose" @click="handleClose">
                <i class="el-dialog__close el-icon el-icon-close"></i>
            </button>
        </div>
        <div class="floatwindowsleft"></div>
        <div class="floatwindowsbody" v-if="rendered"
            :style="{ width: (type == '1' && rowcolchange) ? 'calc(100% - 23px)' : 'calc(100% - 6px)' }">
            <slot></slot>
        </div>
        <div class="floatwindowsright"
            :style="{ width: type == '1' && rowcolchange ? '20px' : '3px', top: (type == '1' && rowcolchange) ? '10px' : '28px' }">
            <i class="el-icon-refresh" v-if="type == '1' && rowcolchange" style="cursor: pointer;top:3px"
                @click="showrowcolchange"></i>
        </div>
        <div class="floatwindowsfoot"></div>
    </div>
</template>

<script>
export default {
    name: "rm_floatwindow",

    props: {
        title: {
            type: String,
            default: ""
        },

        showClose: {
            type: Boolean,
            default: true
        },

        customClass: {
            type: String,
            default: ""
        },
        winStyle: String,

        beforeClose: Function,
        visible: {
            type: Boolean,
            default: false
        },
        type: {
            type: String,
            default: "0"
        },
        isMarrow: {
            type: Boolean,
            default: false
        },
        isGene: {
            type: Boolean,
            default: false
        },
        showExportBtn: {
            type: Boolean,
            default: false
        },
    },

    data() {
        return {
            closed: false,
            key: 0,
            rendered: true,
            stylerec: this.winStyle,
            rowcolchange: true //横竖排转换
        };
    },

    watch: {
        visible(val) {
            if (val) {
                this.closed = false;
                this.$el.style = this.stylerec;
                if (localStorage.getItem("RM_LAB_REPORT_BUTTONFLOAT_SHOWMODE")) {
                    var floatbuttonshowmode = localStorage.getItem("RM_LAB_REPORT_BUTTONFLOAT_SHOWMODE");
                    this.rowcolchange = floatbuttonshowmode == "1";
                }
                // console.log("test");
                if (this.isMarrow) {
                    var lis313 = document.getElementById("LIS313mainpage");
                    if (lis313) {
                        lis313.appendChild(this.$el);
                    }
                    // document.body.appendChild(this.$el);
                } else if (this.isGene) {
                    var lis314 = document.getElementById("LIS314mainpage");
                    if (lis314) {
                        lis314.appendChild(this.$el);
                    }
                } else if (this.$parent) {
                    this.$parent.$el.appendChild(this.$el);
                } else {
                    document.body.appendChild(this.$el);
                }
            }
        },
        winStyle(val) {
            this.stylerec = val;
        }
    },

    computed: {},

    methods: {
        handleClose() {
            if (typeof this.beforeClose === "function") {
                this.beforeClose(this.hide);
            } else {
                this.hide();
            }
        },
        hide(cancel) {
            if (cancel !== false) {
                this.$emit("update:visible", false);
                this.$emit("close", this.$el.style);
                //this.visible = false;
                if (this.$el && this.$el.parentNode) {
                    this.$el.parentNode.removeChild(this.$el);
                }
            }
        },
        showrowcolchange() {
            if (this.type == "1") {
                this.rowcolchange = !this.rowcolchange;
                this.$emit("rowcolchange", this.rowcolchange);
            }
        },
        exportReportPDF() {
            this.$emit("exportReportPDF");
        },
    },

    mounted() {
        if (this.visible) {
            this.rendered = true;
            this.$el.style = this.stylerec;
            document.body.appendChild(this.$el);
        }
    },

    destroyed() {
        if (this.$el && this.$el.parentNode) {
            this.$el.parentNode.removeChild(this.$el);
        }
    }
};
</script>
<style scoped>
.floatwindows {
    position: absolute;
    background-color: #e6e6e6;
    z-index: 2000;
    box-shadow: 1px 1px 1px #a98686;
    border: 1px solid #606266;
}

.floatwindowsheader {
    padding: 3px 0 0 15px;
    height: 30px;
    border-bottom: solid 1px #606266;
    background: linear-gradient(0deg, #ecf5ff, #fff);
}

.floatwindowsbody {
    position: relative;
    width: calc(100% - 6px);
    height: calc(100% - 28px);
    left: 3px;
    overflow: auto;
    background-color: white;
}

.floatwindowsfoot {
    position: absolute;
    height: 3px;
    left: 0;
    right: 0;
    bottom: 0;
}

.floatwindowsleft,
.floatwindowsright {
    position: absolute;
    width: 3px;
    top: 28px;
    bottom: 0;
    background-color: white;
}

.floatwindowsleft {
    left: 0px;
}

.floatwindowsright {
    right: 0px;
}</style>
